<script lang="ts">
  import { ProgressStepper, Button, P, Heading } from "flowbite-svelte";
  import { UserCircleOutline, BadgeCheckOutline, ArrowRightAltOutline, AwardOutline } from "flowbite-svelte-icons";

  let current = $state(1);
  const steps = [
    {
      id: 1,
      icon: UserCircleOutline,
      iconClass: "h-5 w-5 lg:h-6 lg:w-6"
    },
    {
      id: 2,
      icon: BadgeCheckOutline,
      iconClass: "h-5 w-5 lg:h-6 lg:w-6"
    },
    {
      id: 3,
      icon: ArrowRightAltOutline,
      iconClass: "h-5 w-5 lg:h-6 lg:w-6"
    },
    {
      id: 4,
      icon: AwardOutline,
      iconClass: "h-5 w-5 lg:h-6 lg:w-6"
    }
  ];

  const stepLabels = ["Personal Info", "Experience", "Review", "Complete"];
</script>

<Heading tag="h3" class="mb-2 text-lg font-semibold">Progress Stepper with Custom Icons</Heading>
<ProgressStepper {steps} bind:current />

<Heading tag="h3" class="mt-8 mb-2 text-lg font-semibold">With icons, no checkmarks (keeps icons for completed steps)</Heading>
<ProgressStepper {steps} bind:current showCheckmarkForCompleted={false} />

<div class="mt-8 flex gap-4">
  <Button onclick={() => (current = Math.max(0, current - 1))} disabled={current === 0} class="rounded bg-gray-500 px-4 py-2 disabled:opacity-50">Previous</Button>

  <Button onclick={() => (current = Math.min(steps.length, current + 1))} disabled={current === steps.length} class="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">Next</Button>
</div>

<div class="mt-4 rounded bg-gray-50 p-4 dark:bg-gray-800">
  <Heading tag="h4" class="font-bold">Current Step</Heading>
  <P>
    <strong>{current === 0 ? "None (all pending)" : stepLabels[current - 1]}</strong>
    (Step {current} of {steps.length})
  </P>
</div>
